<script setup lang="ts">
  import { defineProps, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { queryFileById } from '@/api/system-basic';

  const props = defineProps<{
    tableData: any;
  }>();
  const basicColumns: any[] = [
    {
      title: '物料基表',
      align: 'left',
      headerCellStyle: { fontSize: 'large', fontWeight: 400 },
      children: [
        {
          title: '序号',
          dataIndex: 'id',
          slotName: 'id',
          align: 'center',
          width: '80',
        },
        {
          title: '物料编号',
          dataIndex: 'itemCode',
          width: '180',
        },
        {
          title: '物料名称',
          dataIndex: 'itemName',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '图号',
          dataIndex: 'drawNo',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '物料类型',
          dataIndex: 'itemType',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '牌号',
          dataIndex: 'marque',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '物料ID',
          dataIndex: 'mdsItemId',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },

        {
          title: '单位',
          dataIndex: 'mdsUnitId',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '型号',
          dataIndex: 'partVersion',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },

        {
          title: '产品型号',
          dataIndex: 'prodModel',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '规格',
          dataIndex: 'specs',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },

        {
          title: ' 供应商状态',
          dataIndex: 'spplStusName',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '技术条件',
          dataIndex: 'techCondition',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
      ],
    },
  ];
  const scheduleColumns: any[] = [
    {
      title: '附件表',
      align: 'left',
      headerCellStyle: { fontSize: 'large', fontWeight: 400 },
      children: [
        {
          title: '附件id',
          dataIndex: 'fileId',
          width: '180',
        },
        {
          title: '文件名称',
          dataIndex: 'fileName',
          width: '180',
        },
        {
          title: '文件路径',
          dataIndex: 'filePath',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '文件大小',
          dataIndex: 'fileSize',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '文件类型',
          dataIndex: 'fileType',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '上传时间',
          dataIndex: 'uploadTime',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
        {
          title: '上传人',
          dataIndex: 'userId',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },

        {
          title: '备注',
          dataIndex: 'remark',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
          width: '180',
        },
      ],
    },
  ];

  const booleanStore = useBooleanStore();

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.responseBody?.records || [];
      total.value = props.tableData?.responseBody?.total || 0;
    },
    { immediate: true }
  );

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 58);
  });
  // 物料对象
  const materialInfo = ref<any>();
  // 附件数组
  const scheduleList = ref<any[]>([]);
  // 点击查询当前物料下的附件
  async function showList(record: any) {
    materialInfo.value = record;
    console.log(record);

    const data = await queryFileById({
      mdsItemId: record.mdsItemId,
    });
    scheduleList.value = data.responseBody;
  }

  // 新增附件
  function addSchedule() {}
</script>

<template>
  <div>
    <a-row :gutter="8">
      <a-col :span="24">
        <a-table
          :stripe="true"
          :pagination="false"
          :columns="basicColumns"
          :data="localTableData"
          :scroll="{ y: 400 }"
          style="height: 250px; white-space: nowrap"
          @row-click="showList"
        >
          <template #id="{ record }">{{
            localTableData.indexOf(record) + 1
          }}</template>
        </a-table>
        <div class="page-position">
          <a-pagination
            :total="total"
            :current="pageNum"
            :page-size="pageSize"
            show-total
            show-jumper
            show-page-size
            @change="change"
            @update:pageSize="changeSize"
          />
        </div>
      </a-col>
    </a-row>
    <a-divider />
    <a-row :gutter="8" style="margin-top: 10px">
      <a-col v-show="materialInfo" :span="24">
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="addSchedule"
          >新增附件</a-button
        >
      </a-col>
      <a-col :span="24">
        <a-table
          :stripe="true"
          class="top-table"
          :columns="scheduleColumns"
          :data="scheduleList"
          :scroll="{ y: 400 }"
          style="height: 250px"
        >
          <template #id="{ record }">{{
            localTableData.indexOf(record) + 1
          }}</template>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .top-table {
    margin-top: 10px;
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
